import React from 'react'
import { BookOpen, Heart, Clock, Trophy, Calendar, TrendingUp } from 'lucide-react'
import { motion } from 'framer-motion'
import { Link } from 'react-router-dom'
import { cn } from '../utils/cn'

const Reading: React.FC = () => {
  // 模拟阅读记录数据
  const readingStats = {
    totalBooks: 23,
    totalDays: 45,
    currentStreak: 7,
    totalMinutes: 680,
    favoriteCategory: '情感教育'
  }

  const recentBooks = [
    {
      id: '1',
      title: '小熊宝宝绘本',
      author: '佐佐木洋子',
      cover: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=cute%20little%20bear%20character%20in%20warm%20children%20book%20illustration%20style%20soft%20colors%20gentle%20lighting&image_size=portrait_4_3',
      readDate: '2024-01-15',
      readTime: 15,
      rating: 5,
      isCompleted: true,
      progress: 100
    },
    {
      id: '2',
      title: '彩虹色的花',
      author: '麦克·格雷涅茨',
      cover: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=colorful%20rainbow%20flower%20in%20children%20book%20illustration%20style%20bright%20colors%20whimsical%20art%20style&image_size=portrait_4_3',
      readDate: '2024-01-14',
      readTime: 12,
      rating: 4,
      isCompleted: true,
      progress: 100
    },
    {
      id: '3',
      title: '我爸爸',
      author: '安东尼·布朗',
      cover: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=father%20and%20child%20illustration%20in%20children%20book%20style%20warm%20family%20moment%20soft%20colors&image_size=portrait_4_3',
      readDate: '2024-01-13',
      readTime: 18,
      rating: 5,
      isCompleted: true,
      progress: 100
    }
  ]

  const readingGoals = [
    {
      id: '1',
      title: '每日阅读',
      description: '每天阅读至少10分钟',
      current: 7,
      target: 30,
      unit: '天',
      icon: Clock,
      color: 'primary'
    },
    {
      id: '2',
      title: '月度目标',
      description: '本月阅读10本绘本',
      current: 8,
      target: 10,
      unit: '本',
      icon: BookOpen,
      color: 'sky'
    },
    {
      id: '3',
      title: '探索之旅',
      description: '尝试不同类别的绘本',
      current: 5,
      target: 8,
      unit: '类',
      icon: TrendingUp,
      color: 'leaf'
    }
  ]

  const achievements = [
    {
      id: '1',
      title: '阅读新手',
      description: '完成第一本绘本阅读',
      icon: '🌟',
      earned: true,
      earnedDate: '2024-01-01'
    },
    {
      id: '2',
      title: '坚持达人',
      description: '连续阅读7天',
      icon: '🔥',
      earned: true,
      earnedDate: '2024-01-07'
    },
    {
      id: '3',
      title: '探索家',
      description: '阅读5本不同类别的绘本',
      icon: '🎯',
      earned: true,
      earnedDate: '2024-01-10'
    },
    {
      id: '4',
      title: '故事大王',
      description: '阅读20本绘本',
      icon: '👑',
      earned: false,
      progress: 23,
      target: 20
    }
  ]

  const StatCard: React.FC<{ title: string; value: string | number; icon: any; color: string }> = ({ title, value, icon: Icon, color }) => {
    const colors = {
      primary: 'bg-primary-100 text-primary-600',
      sky: 'bg-sky-100 text-sky-600',
      leaf: 'bg-leaf-100 text-leaf-600',
      orange: 'bg-orange-100 text-orange-600'
    }

    return (
      <div className="bg-white rounded-2xl p-6 shadow-lg">
        <div className={cn("w-12 h-12 rounded-xl flex items-center justify-center mb-4", colors[color as keyof typeof colors])}>
          <Icon className="w-6 h-6" />
        </div>
        <h3 className="text-2xl font-bold text-gray-800 mb-1">{value}</h3>
        <p className="text-gray-600 text-sm">{title}</p>
      </div>
    )
  }

  const BookCard: React.FC<{ book: any }> = ({ book }) => {
    return (
      <div className="bg-white rounded-2xl p-4 shadow-lg hover:shadow-xl transition-all duration-300">
        <div className="flex space-x-4">
          <div className="w-16 h-20 rounded-lg overflow-hidden flex-shrink-0">
            <img
              src={book.cover}
              alt={book.title}
              className="w-full h-full object-cover"
            />
          </div>
          <div className="flex-1 min-w-0">
            <h3 className="font-bold text-gray-800 mb-1 truncate">{book.title}</h3>
            <p className="text-gray-600 text-sm mb-2">{book.author}</p>
            <div className="flex items-center justify-between text-xs text-gray-500 mb-2">
              <span>{book.readDate}</span>
              <span>{book.readTime}分钟</span>
            </div>
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-1">
                {[1, 2, 3, 4, 5].map((star) => (
                  <svg
                    key={star}
                    className={cn(
                      "w-3 h-3",
                      star <= book.rating ? "text-yellow-400 fill-current" : "text-gray-300"
                    )}
                    viewBox="0 0 20 20"
                  >
                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                  </svg>
                ))}
              </div>
              <Link
                to={`/books/${book.id}`}
                className="text-primary-600 text-xs hover:text-primary-700 font-medium"
              >
                查看
              </Link>
            </div>
          </div>
        </div>
      </div>
    )
  }

  const GoalCard: React.FC<{ goal: any }> = ({ goal }) => {
    const progress = (goal.current / goal.target) * 100
    const colors = {
      primary: 'bg-primary-500',
      sky: 'bg-sky-500',
      leaf: 'bg-leaf-500'
    }

    return (
      <div className="bg-white rounded-2xl p-6 shadow-lg">
        <div className="flex items-center justify-between mb-4">
          <div className="flex items-center space-x-3">
            <div className={cn("w-10 h-10 rounded-xl flex items-center justify-center", `bg-${goal.color}-100 text-${goal.color}-600`)}>
              <goal.icon className="w-5 h-5" />
            </div>
            <div>
              <h3 className="font-bold text-gray-800">{goal.title}</h3>
              <p className="text-gray-600 text-sm">{goal.description}</p>
            </div>
          </div>
        </div>
        <div className="mb-4">
          <div className="flex justify-between text-sm mb-2">
            <span className="text-gray-600">进度</span>
            <span className="font-medium">{goal.current}/{goal.target} {goal.unit}</span>
          </div>
          <div className="w-full bg-gray-200 rounded-full h-2">
            <div
              className={cn("h-2 rounded-full", colors[goal.color as keyof typeof colors])}
              style={{ width: `${Math.min(progress, 100)}%` }}
            ></div>
          </div>
        </div>
        {progress >= 100 && (
          <div className="text-center">
            <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-leaf-100 text-leaf-800">
              🎉 已完成
            </span>
          </div>
        )}
      </div>
    )
  }

  const AchievementCard: React.FC<{ achievement: any }> = ({ achievement }) => {
    return (
      <div className={cn(
        "rounded-2xl p-4 transition-all duration-300",
        achievement.earned 
          ? "bg-gradient-to-br from-yellow-50 to-orange-50 border-2 border-yellow-200 shadow-lg" 
          : "bg-gray-50 border-2 border-gray-200"
      )}>
        <div className="text-center">
          <div className="text-3xl mb-2">{achievement.icon}</div>
          <h3 className={cn(
            "font-bold mb-1",
            achievement.earned ? "text-gray-800" : "text-gray-500"
          )}>
            {achievement.title}
          </h3>
          <p className={cn(
            "text-sm mb-2",
            achievement.earned ? "text-gray-600" : "text-gray-400"
          )}>
            {achievement.description}
          </p>
          {achievement.earned ? (
            <div className="text-xs text-gray-500">
              获得于 {achievement.earnedDate}
            </div>
          ) : achievement.progress && (
            <div className="text-xs text-gray-500">
              进度: {achievement.progress}/{achievement.target}
            </div>
          )}
        </div>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-cream-50 to-sky-50">
      <div className="container mx-auto px-4 py-8">
        {/* 页面标题 */}
        <div className="text-center mb-8">
          <h1 className="text-3xl font-bold text-gray-800 mb-2 flex items-center justify-center">
            <BookOpen className="w-8 h-8 text-primary-500 mr-3" />
            阅读记录
          </h1>
          <p className="text-gray-600">记录孩子的阅读成长足迹</p>
        </div>

        {/* 统计卡片 */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8">
          <StatCard
            title="已读绘本"
            value={readingStats.totalBooks}
            icon={BookOpen}
            color="primary"
          />
          <StatCard
            title="阅读天数"
            value={readingStats.totalDays}
            icon={Calendar}
            color="sky"
          />
          <StatCard
            title="连续打卡"
            value={`${readingStats.currentStreak}天`}
            icon={Trophy}
            color="leaf"
          />
          <StatCard
            title="阅读时长"
            value={`${readingStats.totalMinutes}分钟`}
            icon={Clock}
            color="orange"
          />
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* 最近阅读 */}
          <div className="lg:col-span-2">
            <div className="bg-white rounded-3xl p-6 shadow-lg">
              <div className="flex items-center justify-between mb-6">
                <h2 className="text-xl font-bold text-gray-800 flex items-center">
                  <Clock className="w-6 h-6 text-primary-500 mr-2" />
                  最近阅读
                </h2>
                <button className="text-primary-600 hover:text-primary-700 text-sm font-medium">
                  查看全部
                </button>
              </div>
              <div className="space-y-4">
                {recentBooks.map((book) => (
                  <BookCard key={book.id} book={book} />
                ))}
              </div>
            </div>
          </div>

          {/* 阅读目标和成就 */}
          <div className="space-y-8">
            {/* 阅读目标 */}
            <div className="bg-white rounded-3xl p-6 shadow-lg">
              <h2 className="text-xl font-bold text-gray-800 mb-6 flex items-center">
                <Trophy className="w-6 h-6 text-leaf-500 mr-2" />
                阅读目标
              </h2>
              <div className="space-y-4">
                {readingGoals.map((goal) => (
                  <GoalCard key={goal.id} goal={goal} />
                ))}
              </div>
            </div>

            {/* 成就徽章 */}
            <div className="bg-white rounded-3xl p-6 shadow-lg">
              <h2 className="text-xl font-bold text-gray-800 mb-6 flex items-center">
                <Heart className="w-6 h-6 text-orange-500 mr-2" />
                成就徽章
              </h2>
              <div className="grid grid-cols-2 gap-3">
                {achievements.map((achievement) => (
                  <AchievementCard key={achievement.id} achievement={achievement} />
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* 今日打卡 */}
        <div className="mt-8 bg-gradient-to-r from-primary-100 via-sky-50 to-leaf-50 rounded-3xl p-8 text-center">
          <h2 className="text-2xl font-bold text-gray-800 mb-4">今日阅读打卡</h2>
          <p className="text-gray-600 mb-6">每天阅读10分钟，培养良好的阅读习惯</p>
          <button className="px-8 py-4 bg-gradient-to-r from-primary-500 to-primary-600 text-white rounded-2xl hover:from-primary-600 hover:to-primary-700 transition-all duration-200 font-medium shadow-lg hover:shadow-xl">
            📚 开始今日阅读
          </button>
        </div>
      </div>
    </div>
  )
}

export default Reading